<template>
	<view class="container">
		<view class="step">
			<uni-steps class="stepPro" :options="stepData" active-color="#57BE6A" deactiveColor="#DADADA" :active="active" />
		</view>
		<!-- 第一步 -->
		<view v-show="active==0">
			<view class="wrapper">
				<view class="title">选择收购方案</view>
				<view class="item" :class="actA==index?'act':''" v-for="(item,index) in scheme" :key="index" @tap="chooseA(index,item)">
					<view class="top">
						<view class="a">
							<text class="a-a">{{item.name}}</text>
							<text class="a-b">（{{item.desc}}）</text>
						</view>
						<view class="b">
							<image class="b-a" v-if="actA==index" src="../../../static/images/center/xuanzhong.png" mode=""></image>
							<view class="b-b" v-else></view>
						</view>
					</view>
					<view class="bottom">
						<view class="a">
							<text class="a-a rmb">{{item.one_refund}}</text>
							<text class="a-b qi">{{item.p_number}}</text>
						</view>
						<view class="b">
							<text class="b-a">总计：</text>
							<text class="b-b">{{item.total_refund}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="wrapper" v-if="ensure.length > 0">
				<view class="title">选择保障物</view>
				<view class="notice">保障手续将由工作人员线下为您办理。</view>
				<view class="item" v-if="index > 0" :class="actB==index?'act':''" v-for="(item,index) in ensure" :key="index" @tap="chooseB(index,item)">
					<view class="top">
						<view class="a">
							<text class="a-a">{{item.name}}</text>
							<text class="a-b">{{item.desc}}</text>
						</view>
						<view class="b">
							<image class="b-a" v-if="actB==index" src="../../../static/images/center/xuanzhong.png" mode=""></image>
							<view class="b-b" v-else></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 第二步 -->
		<view v-show="active==1">
			<view class="infoBox">
				<view class="cell">
					<text class="title">收款人姓名</text>
					<input type="text" v-model="subData.step2_real_name" placeholder="请输入收款人姓名" placeholder-style="font-weight:normal;color:#bbb" />
				</view>
				<view class="cell">
					<text class="title">证件号码</text>
					<input type="idcard" v-model="subData.step2_card_no" placeholder="请输入身份证号码" placeholder-style="font-weight:normal;color:#bbb" />
				</view>
				<view class="cell">
					<text class="title">所在地区</text>
					<text @click="openAddress" class="input">
						{{district}}
					</text>
					<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#FBCC2B"></simple-address>
				</view>
				<view class="cell">
					<text class="title">详细地址</text>
					<input type="text" v-model="subData.step2_detail" placeholder="请填写详细地址" placeholder-style="font-weight:normal;color:#bbb" />
				</view>
				<view class="cell">
					<text class="title">手机号码</text>
					<input type="text" v-model="subData.step3_mobile" placeholder="请输入手机号码" placeholder-style="font-weight:normal;color:#bbb" />
				</view>
			</view>
			<view class="imgBox">
				<view class="title">上传身份证</view>
				<view class="uploadBox" @tap="upload_img(1)">
					<view class="icon">
						<image src="../../../static/images/center/camera-W.png" mode=""></image>
						<text>上传人像面</text>
					</view>
					<image class="licenseImg" :src="subData.step2_card_image_z" mode="aspectFit"></image>
				</view>
				<view class="uploadBox" @tap="upload_img(2)">
					<view class="icon">
						<image src="../../../static/images/center/camera-W.png" mode=""></image>
						<text>上传国徽面</text>
					</view>
					<image class="licenseImg" :src="subData.step2_card_image_f" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<!-- 第三步 -->
		<view v-show="active==2">
			<view class="infoBox">
				<view class="cell">
					<text class="title">银行卡号</text>
					<input type="text" v-model="subData.step3_bank_card" placeholder="请输入银行卡号" placeholder-style="font-weight:normal;color:#bbb" />
				</view>
				<view class="cell">
					<text class="title">开户行</text>
					<input type="text" v-model="subData.step3_bank_sub" placeholder="请输入开户行" placeholder-style="font-weight:normal;color:#bbb" />
				</view>
			</view>
			<view class="imgBox">
				<view class="title">上传银行卡</view>
				<view class="uploadBox" @tap="upload_img(3)">
					<view class="icon">
						<image src="../../../static/images/center/camera-W.png" mode=""></image>
						<text>上传银行卡</text>
					</view>
					<image class="licenseImg" :src="subData.step3_bank_image_z" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="btn" v-if="[0,1].includes(active)" @tap="submit">下一步</view>
		<view class="btn" v-else @tap="submit">确认</view>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.nvue'
	import utils from "@/common/utils.js"
	import {
		baseUrl
	} from "@/api/api.js"
	import {
		registerVerify,
		takeBuyScheme,
		takeBuyFormSave,
		takeBuyFormCheckOrder 
	} from "@/api/user.js"
	export default {
		components: {
			simpleAddress
		},
		data() {
			return {
				active: 0,
				actA: 0,
				actB: 1,
				scheme: [], //收购方案
				ensure: [], //保障物
				stepData: [{
					title: '收购方案',
				}, {
					title: '基本信息',
				}, {
					title: '银行信息',
				}],
				baseUrl: "",
				cityPickerValueDefault: [0, 0, 0],
				district: "请选择地区",
				subData: {
					id: "",
					take_order_id: "",
					//第一步
					step1_scheme_id: 0,
					step1_ensure: 1,
					//第二步
					step2_real_name: "",
					step2_card_no: "",
					step2_province: "",
					step2_city: "",
					step2_district: "",
					step2_detail: "",
					step3_mobile: "",
					step2_card_image_z: "",
					step2_card_image_f: "",
					//第三步
					step3_bank_card: "",
					step3_bank_sub: "",
					step3_bank_image_z: ""
				},
			}
		},
		onLoad(option) {
			this.baseUrl = baseUrl()
			this.subData.take_order_id = option.orderId
			takeBuyScheme({
				take_order_id: option.orderId
			}).then(res => {
				this.scheme = res.data.scheme
				this.subData.step1_scheme_id = this.scheme[0].id
				this.ensure = res.data.ensure
				if(res.data.buy_form_order.take_order_id) {
					this.subData = res.data.buy_form_order
					this.district = this.subData.step2_province + ' ' + this.subData.step2_city + ' ' + this.subData.step2_district
					let _this = this
					this.scheme.forEach((item,index) => {
						if(item.id == this.subData.step1_scheme_id) {
							this.actA = index
						}
					})
					this.actB = this.subData.step1_ensure
				}
			})
		},
		onBackPress(e) {
			if (this.active > 0) {
				this.active--
				return true;
			}
		},
		methods: {
			// ***************step-1****************
			chooseA(index, item) {
				this.actA = index
				this.subData.step1_scheme_id = item.id
			},
			chooseB(index, item) {
				this.actB = index
				this.subData.step1_ensure = index
			},
			// ***************step-2****************
			openAddress() {
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.district = e.label.replace(/-/g, " ");
				let arrAdd = e.label.split('-');
				this.subData.step2_province = arrAdd[0];
				this.subData.step2_city = arrAdd[1];
				this.subData.step2_district = arrAdd[2];
			},
			upload_img(type) {
				let _this = this;
				let token = uni.getStorageSync("Authori-zation");
				uni.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						uni.showLoading({
							mask:true,
							title: "上传中"
						})
						//因为有一张图片， 输出下标[0]， 直接输出地址
						var imgFiles = res.tempFilePaths[0];
						//#ifdef H5
						utils.imgCompress(imgFiles).then(re => {
							imgFiles = re
							//#endif
							uni.uploadFile({
								// 需要上传的地址
								url: _this.baseUrl + "/upload/image",
								header: {
									"Authori-zation": "Bearer " + token
								},
								// filePath  需要上传的文件
								filePath: imgFiles,
								name: "file",
								success(_res) {
									uni.hideLoading()
									var res = JSON.parse(_res.data);
									if (_res.statusCode === 200 && res.status === 200) {
										if (type == 1) {
											_this.subData.step2_card_image_z = res.data.url
										} else if (type == 2) {
											_this.subData.step2_card_image_f = res.data.url
										} else if (type == 3) {
											_this.subData.step3_bank_image_z = res.data.url
										}
									} else {
										uni.showToast({
											title: "上传失败"
										});
									}
								}
							});
							//#ifdef H5
						})
						//#endif
					}
				});
			},
			submit() {
				if (this.active == 0) {
					this.active++
					uni.pageScrollTo({

						scrollTop: 0, //距离页面顶部的距离

						duration: 100

					});
				} else if (this.active == 1) {
					uni.showLoading({
						mask:true
					})
					takeBuyFormCheckOrder({
						step: 2,
						step2_real_name: this.subData.step2_real_name,
						step2_card_no: this.subData.step2_card_no,
						step3_mobile: this.subData.step3_mobile,
						step2_card_image_z: this.subData.step2_card_image_z,
						step2_card_image_f: this.subData.step2_card_image_f
					}).then(res => {
						uni.hideLoading()
						this.active++
						uni.pageScrollTo({
						
							scrollTop: 0, //距离页面顶部的距离
						
							duration: 100
						
						});
					})
				} else if (this.active == 2) {
					uni.showLoading({
						mask:true
					})
					takeBuyFormSave(this.subData).then(res => {
						uni.hideLoading()
						uni.redirectTo({
							url:"./pickCardBuyCon?orderId=" + this.subData.take_order_id + "&type=2"
						})
					})
				}
			}
		}
	}
</script>
<style>
	page {
		background: #fafafa;
		padding-bottom: 40rpx;
	}
</style>
<style lang="scss" scoped>
	.container {
		.step {
			background-color: #fff;
			padding: 20rpx 0;
			border-top: 20rpx solid #FAFAFA;
		}

		.wrapper {
			padding: 30rpx;
			background-color: #fff;

			.title {
				font-size: 30rpx;
				color: #666666;
				margin-bottom: 30rpx;
			}
			.notice{
				padding: 8rpx 20rpx;
				background: #FFFAE8;
				color: #333;
				border-radius: 10rpx;
				font-size: 28rpx;
			}
			.item {
				margin-top: 20rpx;
				background: #fafafa;
				border: 2rpx solid #eeeeee;
				padding: 20rpx 30rpx;
				border-radius: 20rpx;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: baseline;

					.a {
						.a-a {
							font-size: 30rpx;
							font-weight: bold;
							color: #333333;
						}

						.a-b {
							font-size: 24rpx;
							color: #666666;
						}
					}

					.b {
						.b-a {
							width: 40rpx;
							height: 40rpx;
						}

						.b-b {
							width: 40rpx;
							height: 40rpx;
							background: #FFFFFF;
							border: 2rpx solid #EEEEEE;
							border-radius: 50%;
							box-sizing: border-box;
						}
					}
				}

				.bottom {
					margin-top: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: baseline;

					.a {
						font-size: 36rpx;
						font-weight: bold;
						color: #333333;

						.rmb {
							&::before {
								content: "￥";
								font-size: 20rpx;
							}

							&::after {
								content: " × ";
								position: relative;
								top: -4rpx;
								font-weight: normal;
								font-size: 20rpx;
							}
						}

						.qi {
							&::after {
								content: " 期";
								font-size: 20rpx;
							}
						}
					}

					.b {
						.b-a {
							font-size: 24rpx;
							color: #666666;
						}

						.b-b {
							font-size: 36rpx;
							font-weight: bold;
							color: #333333;

							&::before {
								content: "￥";
								font-size: 20rpx;
							}
						}
					}
				}
			}

			.act {
				background: #FFFAE8;
				border: 2rpx solid #FACF3C;
			}
		}

		.infoBox {
			padding: 30rpx;
			background: #fff;

			.cell {
				display: flex;
				border-bottom: 1rpx solid #eee;
				position: relative;

				.title {
					height: 100rpx;
					line-height: 100rpx;
					min-width: 180rpx;
					font-size: 30rpx;
					color: #666666;
				}

				.input {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					height: 100rpx;
					line-height: 100rpx;
				}

				input {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					height: 100rpx;
					line-height: 100rpx;
				}

				.veri {
					position: absolute;
					right: 0;
					top: 28rpx;
					font-size: 28rpx;
					color: #57BE6A;
					padding: 2rpx 10rpx;
					border: 2rpx solid #57BE6A;
					border-radius: 4rpx;
				}

				.ver {
					position: absolute;
					right: 0;
					top: 32rpx;
					font-size: 24rpx;
					color: #bbb;
					padding: 2rpx 10rpx;
				}
			}
		}

		.imgBox {
			background-color: #fff;
			padding: 0 30rpx 50rpx;

			.title {
				font-size: 30rpx;
				color: #666666;
			}

			.uploadBox {
				margin-top: 34rpx;
				width: 690rpx;
				height: 400rpx;
				background-color: #FAFAFA;
				border: 2rpx dashed #DEDEDE;
				border-radius: 8rpx;
				position: relative;

				.icon {
					position: absolute;
					z-index: 1;
					left: 50%;
					top: 50%;
					margin-top: -75rpx;
					margin-left: -75rpx;
					width: 150rpx;
					height: 150rpx;
					background: #57BE6A;
					border-radius: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					image {
						width: 66rpx;
						height: 54rpx;
						margin-top: -10rpx;
						margin-bottom: 4rpx;
					}

					text {
						font-size: 20rpx;
						color: #FFFFFF;
					}
				}

				.licenseImg {
					position: relative;
					z-index: 2;
					width: 690rpx;
					height: 400rpx;
				}
			}
		}

		.btn {
			margin: 80rpx auto 0;
			width: 600rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #FBCC2B 0%, #FBDC72 100%);
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>
